<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <style>
      .form-select {
        width: 103px;
        display: inline-block;
      }
      .col-form-label {
        text-align: right;
      }
      .figure-img {
        width: 100px;
        height: 100px;
        cursor: pointer;
      }
      #upload {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 class="p-5">个人设置</h1>
      <form class="col-4">
        <div class="row mb-3">
          <label class="col-form-label col-3">昵称：</label>
          <div class="col-9">
            <input class="form-control col-9" type="text" name="nickname" />
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-form-label col-3">籍贯：</label>
          <div class="col-9">
            <select class="form-select col-4" name="province">
              <option value="">--省--</option>
            </select>
            <select class="form-select col-4" name="city">
              <option value="">--市--</option>
            </select>
            <select class="form-select col-4" name="area">
              <option value="">--区--</option>
            </select>
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-form-label col-3">头像：</label>
          <div class="col-9">
            <input class="form-control col-9" type="hidden" name="avatar" />
            <figure class="figure">
              <input type="file" id="upload" />
              <img
                src="https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg"
                class="figure-img img-fluid rounded"
                alt="..."
              />
              <figcaption class="figure-caption">修改头像</figcaption>
            </figure>
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-3"></label>
          <div class="col-9">
            <button class="btn btn-primary">保存</button>
          </div>
        </div>
      </form>
    </div>

    <script src="./lib/bootstrap.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script src="./lib/form-serialize.js"></script>
    <script>
      axios.defaults.baseURL = "http://ajax-api.itheima.net";
      async function getUserInfo() {
        // 获取用户信息
        const userInfo = await axios.get("/api/settings");
        const { area, avatar, city, nickname, province } = userInfo.data.data;
        console.log(city);
        // 显示昵称
        document.querySelector("[name=nickname]").value = nickname;
        // 显示头像
        document.querySelector(".figure-img").src = avatar;

        // ------ 获取省份信息 ----------
        const proRes = await axios.get("/api/province");
        const proSel = document.querySelector("[name=province]");
        proSel.innerHTML = proRes.data.data
          .map((item) => {
            return `<option value="${item}">${item}</option>`;
          })
          .join("");
        // 设置当前用户所在省份
        proSel.value = province;

        // ------ 获取城市信息 ----------
        const cityRes = await axios({
          url: "/api/city",
          params: {
            pname: province,
          },
        });
        const citySel = document.querySelector("[name=city]");
        citySel.innerHTML = cityRes.data.data
          .map((item) => {
            return `<option value="${item}">${item}</option>`;
          })
          .join("");
        // 设置当前用户所在城市
        citySel.value = city;

        // ------ 获取区信息 ----------
        const areaRes = await axios({
          url: "/api/area",
          params: {
            pname: province,
            cname: city,
          },
        });
        const areaSel = document.querySelector("[name=area]");
        areaSel.innerHTML = areaRes.data.data
          .map((item) => {
            return `<option value="${item}">${item}</option>`;
          })
          .join("");
        // 设置当前用户所在城市
        areaSel.value = area;

        // ------ 基于省市区的联动 ----------
        proSel.addEventListener("change", async function () {
          console.log(this.value);
          // 获取对应省份的城市信息
          const cityRes = await axios({
            url: "/api/city",
            params: {
              pname: this.value,
            },
          });
          // console.log(cityRes);
          citySel.innerHTML = cityRes.data.data
            .map((item) => {
              return `<option value="${item}">${item}</option>`;
            })
            .join("");

          // 获取区信息
          const areaRes = await axios({
            url: "/api/area",
            params: {
              pname: this.value,
              cname: citySel.value,
            },
          });
          areaSel.innerHTML = areaRes.data.data
            .map((item) => {
              return `<option value="${item}">${item}</option>`;
            })
            .join("");
        });

        // ------ 基于市区的联动 ----------
        citySel.addEventListener("change", async function () {
          // 获取区信息
          const areaRes = await axios({
            url: "/api/area",
            params: {
              pname: proSel.value,
              cname: this.value,
            },
          });
          areaSel.innerHTML = areaRes.data.data
            .map((item) => {
              return `<option value="${item}">${item}</option>`;
            })
            .join("");
        });
      }

      window.addEventListener("load", function () {
        getUserInfo();
      });
    </script>
  </body>
</html>
